<template>
  <div>
    <!--    面包屑导航-->
    <el-breadcrumb style="padding-bottom:15px " separator="/">
      <el-breadcrumb-item :to="{ path: '/main ' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>签到管理</el-breadcrumb-item>
      <el-breadcrumb-item>管理签到</el-breadcrumb-item>
    </el-breadcrumb>
    <!--    页面内容-->
    <el-card>
      <!--    搜索头部-->
      <!-- <el-row :gutter="40" style="padding-bottom: 15px"> -->
        <!-- <el-col :span="8">
          <el-input placeholder="请输入内容" v-model="input3" class="input-with-select" @keyup.enter.native="Search"
                    clearable>
            <el-button slot="append" icon="el-icon-search" @click="Search"></el-button>
          </el-input>
        </el-col> -->
        <!-- <el-col :span="4">
          <el-button type="primary" size="mini" @click="addSign">发起签到</el-button>
        </el-col> -->
        <!-- <el-col :span="4" style="  position:absolute; left:90%;">
          <el-button type="primary" icon="el-icon-refresh-right" @click="getSignList"></el-button>
        </el-col>
      </el-row> -->
      <!--      渲染数据表格fr-->
      <el-table
          :data="SignList.data"
          border
          style="width: 100%">
        <el-table-column
            type="index"
            width="35">
        </el-table-column>
        <!--        <el-table-column-->
        <!--            prop="u_name"-->
        <!--            label="姓名"-->
        <!--            width="180">-->
        <!--        </el-table-column>-->
        <el-table-column
            prop="s_number"
            label="项目名称"
            width="300">
        </el-table-column>
        <el-table-column
            prop="address"
            label="地点"
            width="300">
        </el-table-column>
        <el-table-column
            prop="signtime"
            label="打卡时间"
            width="300">
        </el-table-column>

        <el-table-column
            prop="name"
            label="编码"
            width="318">
        </el-table-column>

        <el-table-column
            prop="s_id"
            label="操作"
            width="318">
          <div slot-scope="scope">
            <el-button type="primary" size="mini" @click="updateSign(scope.row)">查看/编辑</el-button>
            <el-button type="danger" size="mini" @click="deleteSign(scope.row)">删除</el-button>
          </div>
        </el-table-column>
      </el-table>
      <!--      分页控件-->
      <el-pagination
          @size-change="SizeChange"
          @current-change="CurrentChange"
          :current-page="page"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="SignList.count">
      </el-pagination>
      <!--      编辑用户dialog对话框-->
      <el-dialog
          title="编辑入校信息"
          :visible.sync="dialogUpdateSign"
          width="30%">
        <!--        内容区域-->
        <el-form :model="UpdateSign" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <!--          <el-form-item label="姓名">-->
          <!--            <el-input v-model="UpdateUserList.u_name" disabled></el-input>-->
          <!--          </el-form-item>-->
          <el-form-item label="项目名称" prop="s_number">
            <el-input v-model="UpdateSignList.s_number" ></el-input>
          </el-form-item>
          <el-form-item label="地点" prop="address">
            <el-input v-model="UpdateSignList.address" ></el-input>
          </el-form-item>
          <el-form-item label="打卡时间" prop="signtime">
            <el-input v-model="UpdateSignList.signtime"></el-input>
          </el-form-item>
          <el-form-item label="编码" prop="name">
            <el-input v-model="UpdateSignList.name"></el-input>
          </el-form-item>
          <el-form-item label="序号" prop="s_id">
            <el-input v-model="UpdateSignList.s_id"></el-input>
          </el-form-item>


        </el-form>
        <span slot="footer" class="dialog-footer">
    <el-button @click="dialogUpdateSign = false">取 消</el-button>
    <el-button type="primary" @click="updateSign1">保 存</el-button>
  </span>
      </el-dialog>
      <el-dialog
          title="更改入校信息"
          :visible.sync="dialogAddSign"
          width="30%">
        <el-form :model="AddSignList" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">

          <el-form-item label="项目名称" prop="name">
            <el-input v-model="AddSignList.name" ></el-input>
          </el-form-item>
          <el-form-item label="地点" prop="address">
            <el-input v-model="AddSignList.address" ></el-input>
          </el-form-item>
          <el-form-item label="打卡时间" prop="signtime">
            <el-input v-model="AddSignList.signtime"></el-input>
          </el-form-item>
          <el-form-item label="编码" prop="s_number">
            <el-input v-model="AddSignList.s_number"></el-input>
          </el-form-item>
          <el-form-item label="序号" prop="s_id">
            <el-input v-model="AddSignList.s_id"></el-input>
          </el-form-item>
          <el-button type="primary" @click="addSign1" class="a">添 加</el-button>
        </el-form>

      </el-dialog>
    </el-card>
  </div>
</template>


<script>
export default {
  name: "Sign",
  //数据
  data() {
    return {
      input3: null,
      page: 1,
      limit: 10,
      SignList: [],
      UpdateSignList: {
        s_id: '',

      },
      AddSignList:{
        name: "",
        address: "",
        signtime: "",
        s_number: "",

      },
      dialogAddSign: false,
      dialogUpdateSign: false,

    }
  },
  //方法
  methods: {
    //添加
    addSign(){
      this.dialogAddSign = !this.dialogAddSign
    },
    addSign1(){
      this.dialogAddSign = !this.dialogAddSign
      this.$http.get("/SignController/addSign", {
        params: {
          s_id: this.AddSignList.s_id,
          name: this.AddSignList.name,
          address: this.AddSignList.address,
          signtime: this.AddSignList.signtime,
          s_number: this.AddSignList.s_number,
                }
      }).then((res) => {
        console.log(res)
        this.SignList = res.data;
        if (res.data.code === 1) {
          this.$message.success("添加成功")
          this.getSignList();
        } else this.$message.error("添加失败")
      })
    },
    //关键字搜索
    Search() {
      console.log(this.input3)
      this.$http.get("/SignController/selectWhereSign", {
        params: {
          page: 1,
          limit: 10,
          Keyword: this.input3,
        }
      }).then((res) => {
        console.log(res.data)
        this.SignList = res.data;
        if (res.data.code === 1) {
          this.$message.success("搜索成功")
        } else this.$message.error("搜索失败")
      })
    },
    //请求查看用户列表数据
    getSignList() {
      this.$http.get("/SignController/querySign", {
        params: {
          page: this.page,
          limit: this.limit,
        }
      }).then((res) => {
        // console.log(res)
        this.SignList = res.data;
        if (res.data.code === 1) {
          // this.$message.success("请求成功")
        } else this.$message.error("请求失败")
      })
    },
    //编辑按钮事件
    updateSign(row) {
      this.dialogUpdateSign = !this.dialogUpdateSign
      this.UpdateSignList = row;
      console.log(this.UpdateSignList)
    },
    //确定编辑事件
    updateSign1() {
      this.dialogUpdateSign = !this.Sign
      this.$http.get("/SignController/updataSign", {
        params: {
          s_id: this.AddSignList.s_id,
          name: this.AddSignList.name,
          address: this.AddSignList.address,
          signtime: this.AddSignList.signtime,
          s_number: this.AddSignList.s_number,
        }
      }).then((res) => {
        console.log(res)
        this.SignList = res.data;
        if (res.data.code === 1) {
          this.$message.success("保存成功")
          this.getSignList();
        } else this.$message.error("保存失败")
      })
    },
    //删除按钮事件
    deleteSign(row) {
      this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http.get("/SignController/deleteSign", {
          params: {
            s_id: row.s_id,
          }
        }).then((res) => {
          console.log(res)
          if (res.data.code === 1) {
            this.$message.success("删除成功")
            this.getSignList();
          } else this.$message.error("删除失败")
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    //每页条数发生改变时触发
    SizeChange(limit) {
      this.limit = limit;
      this.getSignList();
    },
    //页码发生改变时触发
    CurrentChange(page) {
      this.page = page;
      this.getSignList();
    },
  },
  //  钩子函数
  created() {
    this.getSignList();
  }
}
</script>

<style scoped>
.a{
  margin-left: 360px;
  margin-top: 20px;
}
</style>









